<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    <html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="format-detection" content="telephone=no">
        <meta name="referrer" content="no-referrer" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>在线客服</title>
        <link rel="stylesheet" href="../res/css/layui.mobile.css">
        <link rel="stylesheet" href="../res/css/layim.css">
        <link rel="stylesheet" href="http://at.alicdn.com/t/font_191348_e0uxemmn36myrpb9.css">
        <link rel="stylesheet" href="../res/plugins/photoswipe/photoswipe.css">
        <link rel="stylesheet" href="../res/plugins/photoswipe/default-skin/default-skin.css">
        <style>
            html,
            body {
                height: 100%;
                overflow: hidden;
                background-color: #efefef;
            }

            .icon-fanhuijiantou {
                font-size: 18px;
            }

            #faceBox {
                display: none;
            }

            .isShow {
                /* display: none; */
            }

            #backChat {
                position: fixed;
                width: 20px;
                height: 20px;
                top: 20px;
                left: 20px;
                background: rgba(153, 153, 153, 0.5);
                border-radius: 50%;
                z-index: 198910141;
            }

            .dot {
                position: absolute;
                top: 2px;
                left: 36px;
                border-radius: 50%;
                background-color: red;
                display: inline-block;
                width: 16px;
                height: 16px;
                font-size: 8px !important;
                text-align: center;
                line-height: 16px;
                color: #fff;
            }

            .icon-xiaolian {
                color: #666;
                font-size: 24px;
                line-height: 40px;
                padding-right: 4px;
                background-color: #fff;
                
            }

            .model_box {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                display: none;
                text-align: center;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                z-index: 198910141;
                color: #666;
                padding: 0 20px;
                box-sizing: border-box;
            }

            .tip_box {
                font-size: 24px;
            }

            .tip_content_box {
                font-size: 14px;
            }

            .layim-chat-footer {
                height: 50px;
            }

            .layim-user-box {
                display: flex;
            }

            .layim-chat-mine .layim-user-box {
                justify-content: flex-end;
            }

            .username_box {
                display: inline-block;
                max-width: 100px;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .time_box {
                margin: 0 20px;
                display: inline-block;
            }

            .layim-chat-main{
                padding: 0 15px;
            }
            .layim-chat-main,
            .layim-content {
                top: 10px;
                /* bottom: 70px; */
            }
            .contInfo img{
                position: initial !important;
                width: 16px !important;
                height: 16px !important;
            }
            .isRobot{
                display: none;
                width: 100%;
                background-color: #2f9833 !important;
            }
            /* 加大列表行高 */
            #chatListBox li{        
                padding: 10px 15px 10px 60px;
                border-bottom: 1px solid #efefef;
            }

            .layui-layim-list li img{
                top:13px;
            }
            .layui-m-layerchild,.layim-panel, .layim-title,.layim-chat-main, .layim-content,.layui-layim,.layim-chat-footer,.layim-chat-main ul li,
            .layui-layim-face,.layim-chat-user,.layim-chat-user cite,.layim-chat-text{
                z-index: 1;
            }
            *{
                z-index: 1;
            }
            

            .pswp{
                z-index: 1500000000;
            }

            
            @keyframes rotateZ{
                0%{
                    transform: rotateZ(0deg);
                }
                100%{
                    transform: rotateZ(360deg);
                }
            }

            .rotateZAnimated{
                display: inline-block;
                animation: rotateZ 1s infinite ease-out;
                
            }
            .rotateZAnimated .iconfont{
                padding-right:0 !important;
            }
            .icon-weibiaoti-{
                color: red;
            }
            .editBox{
                background-color: #fff;
                line-height: 40px;
                padding: 0 6px;
                border-radius: 0 3px 3px 0;
                position: relative;
            }
            .editBox i.on{
                transform: rotateZ(0deg);
            }
            /* 底部加号按钮相关 */
            #chatBox .icon-guanbi{
                display: inline-block;
                transform: rotateZ(45deg);
                font-size: 24px;
                color: #666;
                transition: transform 0.2s;
            }
            .layim-chat-footer{
                z-index: 2;
            }
            .posStyle{
                position: absolute;
                bottom: 40px;
                left: 0;
                display: none;
                
            }
            .posStyle:nth-child(2){
                bottom: 80px;
            }
            .icon-xiangji,.icon-fasonghongbaocopy{
                
                background-color: rgba(239,239,239,0.5);
                font-size: 24px;
                line-height: 40px;
                padding: 0 6px;
                color: #666;
            }
            .bounceInUp{
                animation: bounceInUp 0.3s;
            }
            @keyframes bounceInUp{
                0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}
                60%{opacity:1;-webkit-transform:translateY(-30px);transform:translateY(-30px)}
                80%{-webkit-transform:translateY(10px);transform:translateY(10px)}
                100%{-webkit-transform:translateY(0);transform:translateY(0)}
            }
            /* end */

            /* 楼盘卡片发送相关 */
            #floorListCard{
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.5);
                z-index: 100000000;
                display: none;
                align-items: center;

            }
            #floorListCard .content{
                
                width: 100%;
            }
            #floorListCard .closeBox{
                margin-top: 30px;
                text-align: center;
            }
            #floorListCard .content .icon-guanbi1{
                font-size: 30px;
                color: #eee;
            }
            #floorListCard ul{
                background-color: #fff;
                width: 80%;
                margin: 0 auto;
                border-radius: 4px;
                padding: 10px;
                box-sizing: border-box;
            }
            #floorListCard ul li{
                height: 40px;
                line-height: 40px;
                color: #333;
                font-size: 14px;
                border-bottom: 1px solid #eee;
            }
            #floorListCard ul li span{
                float: right;
                display: block;
                font-size: 14px;
                background: #2f9833 !important;
                height: 26px;
                line-height: 26px;
                color: #fff;
                width: 48px;
                text-align: center;
                border-radius: 4px;
                position: relative;
                top: 6px;
            }
            .fadeInUp{
                animation: fadeInUp 0.3s;
            }
            @keyframes fadeInUp{
                0%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}
                100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
            }
        </style>
    </head>

    <body>

        <div id="main" class="layui-m-layer layui-m-layer1" index="0">
            <div class="layui-m-layermain" style="z-index:19891014">
                <div class="layui-m-layersection">
                    <div class="layui-m-layerchild  layui-m-anim--1">
                        <div class="layui-m-layercont">
                            <div class="layim-panel layui-m-anim-right">
                                <!-- <div class="layim-title" style="background-color: #36373C;">
                                    <p>我的IM
                                        <span class="layim-chat-status"></span>
                                    </p>
                                </div> -->
                                <div class="layui-unselect layim-content">
                                    <div class="layui-layim" style="top:0;bottom:0;overflow-y:initial">
                                        <div class="layim-tab-content layui-show" style="overflow-y:scroll;width:100%;height:100%;">
                                            <ul class="layim-list-friend">
                                                <ul class="layui-layim-list layui-show layim-list-history" id="chatListBox">
                                                    <!-- <li layim-event="chat" data-type="history" data-index="0">
                                                        <div>
                                                            <img src="http://tp1.sinaimg.cn/1571889140/180/40030060651/1">
                                                            <span class="dot">4</span>
                                                        </div>
                                                        <span class="name">客户11111</span>
                                                        <p>123</p>
                                                        <span class="layim-msg-status">new</span>
                                                    </li>
                                                    <li layim-event="chat" data-type="history" data-index="1001">
                                                        <div>
                                                            <img src="http://tp1.sinaimg.cn/1571889140/180/40030060651/1">
                                                            <span class="dot">12</span>
                                                        </div>
                                                        <span class="name">客户11113</span>
                                                        <p>123</p>
                                                        <span class="layim-msg-status">new</span>
                                                    </li> -->
                                                </ul>
                                            </ul>
                                        </div>

                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="chatBox" class="layui-m-layer layui-m-layer1 layui-hide ">
            <div class="layui-m-layermain" style="z-index:19891014">
                <div class="layui-m-layersection">
                    <div class="layui-m-layerchild  layui-m-anim--1">
                        <div class="layui-m-layercont">
                            <div class="layim-panel layui-m-anim-left">
                                <div id="backChat">
                                    <i class="iconfont icon-fanhuijiantou"></i>
                                    <span id="chatName" style="display:none;"></span>
                                    <span class="layim-chat-status" style="display:none;"></span>
                                </div>

                                <div class="layui-unselect layim-content">
                                    <div class="layim-chat layim-chat-friend" id="chatInfoBox">
                                        <div class="layim-chat-main layui-hide" data-fansid="0">
                                            <ul>
                                                <!-- <li class="layim-chat-system">
                                                    <span>10-27 16:30</span>
                                                </li>
                                                <li class="layim-chat-li layim-chat-mine">
                                                    <div class="layim-chat-user">
                                                        <img src="http://tp4.sinaimg.cn/1345566427/180/5730976522/0">
                                                        <cite>万小二</cite>
                                                    </div>
                                                    <div class="layim-chat-text">我是第一条</div>
                                                </li>

                                                <li class="layim-chat-li">
                                                    <div class="layim-chat-user">
                                                        <img src="http://tp4.sinaimg.cn/1345566427/180/5730976522/0">
                                                        <cite>我是客户</cite>
                                                    </div>
                                                    <div class="layim-chat-text">嗨，欢迎体验LayIM。演示标记：1508565819152</div>
                                                </li> -->

                                            </ul>
                                        </div>
                                        <div class="layim-chat-main layui-hide" data-fansid="1001">
                                            <ul>
                                                <!-- <li class="layim-chat-system">
                                                    <span>10-27 16:30</span>
                                                </li>
                                                <li class="layim-chat-li layim-chat-mine">
                                                    <div class="layim-chat-user">
                                                        <img src="http://tp4.sinaimg.cn/1345566427/180/5730976522/0">
                                                        <cite>万小二</cite>
                                                    </div>
                                                    <div class="layim-chat-text">第二条</div>
                                                </li>

                                                <li class="layim-chat-li">
                                                    <div class="layim-chat-user">
                                                        <img src="http://tp4.sinaimg.cn/1345566427/180/5730976522/0">
                                                        <cite>我是客户</cite>
                                                    </div>
                                                    <div class="layim-chat-text">嗨，欢迎体验LayIM。演示标记：1508565819152</div>
                                                </li> -->

                                            </ul>
                                        </div>
                                        <div class="layim-chat-footer">
                                            <div class="layim-chat-send">
                                                <input class="noRobot" type="text" autocomplete="off" id="content">
                                                <span class="noRobot iconfont icon-xiaolian" title="选择表情"></span>
                                                <span class="noRobot editBox">
                                                    <i class="iconfont icon-guanbi"></i>
                                                    <span class="posStyle bounceInUp iconfont icon-fasonghongbaocopy"></span>
                                                    <span class="posStyle bounceInUp iconfont icon-xiangji"></span>
                                                </span>

                                                <button class="noRobot layim-send layui-disabled" id="send" style="margin-left:6px;">发送</button>
                                                <button class="isRobot" id="killRobot">接入</button>
                                            </div>
                                            <!-- <div class="layim-chat-tool">
                                                
                                                <span class="iconfont icon-xiangji layim-tool-image" title="上传图片" layim-event="image"><input type="file" name="file" accept="image/*"></span>
                                            </div> -->
                                            
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="faceBox" class="layui-m-layer layui-m-layer1" style="height:88%;">
            <div class="layui-m-layermain" style="z-index:19891014">
                <div class="layui-m-layersection">
                    <div class="layui-m-layerchild layim-layer layui-m-anim-scale" style="bottom:58px;">
                        <div class="layui-m-layercont">
                            <ul class="layui-layim-face">

                                        
                                <li title="[微笑]" data-code="/::)">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427102755304.png">
                                </li>
                                <li title="[撇嘴]" data-code="/::~">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427102806118.png">
                                </li>
                                <li title="[色]" data-code="/::B">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427102811204.png">
                                </li>
                                <li title="[发呆]" data-code="/::|">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427102816272.png">
                                </li>
                                <li title="[得意]" data-code="/:8-)">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427102821779.png">
                                </li>
                                <li title="[流泪]" data-code="/::<">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427102826616.png">
                                </li>
                                <li title="[害羞]" data-code="/::$">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427102831909.png">
                                </li>
                                <li title="[闭嘴]" data-code="/::X">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427102836860.png">
                                </li>
                                <li title="[睡]" data-code="/::Z">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427102841446.png">
                                </li>
                                <li title="[大哭]" data-code="/::'(">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427102846605.png">
                                </li>
                                <li title="[尴尬]" data-code="/::-|">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427102851155.png">
                                </li>
                                <li title="[发怒]" data-code="/::@">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427102856815.png">
                                </li>
                                <li title="[调皮]" data-code="/::P">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427102901326.png">
                                </li>
                                <li title="[呲牙]" data-code="/::D">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427102906485.png">
                                </li>
                                <li title="[惊讶]" data-code="/::O">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427102911867.png">
                                </li>
                                <li title="[难过]" data-code="/::(">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427102916775.png">
                                </li>
                                <li title="[酷]" data-code="/::+">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427102921112.png">
                                </li>
                                <li title="[冷汗]" data-code="/:–b">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427102926579.png">
                                </li>
                                <li title="[抓狂]" data-code="/::Q">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427102931107.png">
                                </li>
                                <li title="[吐]" data-code="/::T">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427102936174.png">
                                </li>
                                <li title="[偷笑]" data-code="/:,@P">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427102941562.png">
                                </li>
                                <li title="[愉快]" data-code="/:,@-D">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427102946241.png">
                                </li>
                                <li title="[白银]" data-code="/::d">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427102951305.png">
                                </li>
                                <li title="[傲慢]" data-code="/:,@o">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427102956983.png">
                                </li>
                                <li title="[饥饿]" data-code="/::g">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103001341.png">
                                </li>
                                <li title="[困]" data-code="/:|-)">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103006230.png">
                                </li>
                                <li title="[恐慌]" data-code="/::!">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103011620.png">
                                </li>
                                <li title="[流汗]" data-code="/::L">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103016770.png">
                                </li>
                                <li title="[憨笑]" data-code="/::>">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103021180.png">
                                </li>
                                <li title="[悠闲]" data-code="/::,@">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103026333.png">
                                </li>
                                <li title="[奋斗]" data-code="/:,@f">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103031826.png">
                                </li>
                                <li title="[咒骂]" data-code="/::-S">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103036856.png">
                                </li>
                                <li title="[疑问]" data-code="/:?">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103041851.png">
                                </li>
                                <li title="[嘘]" data-code="/:,@x">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103046204.png">
                                </li>
                                <li title="[晕]" data-code="/:,@@">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103051515.png">
                                </li>
                                <li title="[疯了]" data-code="/::8">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103056368.png">
                                </li>
                                <li title="[哀]" data-code="/:,@!">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103101584.png">
                                </li>
                                <li title="[骷髅]" data-code="/:!!!">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103106639.png">
                                </li>
                                <li title="[敲打]" data-code="/:xx">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103111714.png">
                                </li>
                                <li title="[再见]" data-code="/:bye">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103116995.png">
                                </li>
                                <li title="[擦汗]" data-code="/:wipe">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103121307.png">
                                </li>
                                <li title="[抠鼻]" data-code="/:dig">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103126628.png">
                                </li>
                                <li title="[鼓掌]" data-code="/:handclap">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103131537.png">
                                </li>
                                <li title="[糗大了]" data-code="/:&amp;-(">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103136922.png">
                                </li>
                                <li title="[坏笑]" data-code="/:B-)">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103141708.png">
                                </li>
                                <li title="[左哼哼]" data-code="/:<@">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103146409.png">
                                </li>
                                <li title="[右哼哼]" data-code="/:@>">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103151786.png">
                                </li>
                                <li title="[哈欠]" data-code="/::-O">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103156150.png">
                                </li>
                                <li title="[鄙视]" data-code="/:>-|">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103201493.png">
                                </li>
                                <li title="[委屈]" data-code="/:P-(">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103206968.png">
                                </li>
                                <li title="[快哭了]" data-code="/::'|">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103211938.png">
                                </li>
                                <li title="[阴险]" data-code="/:X-)">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103216563.png">
                                </li>
                                <li title="[亲亲]" data-code="/::*">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103221494.png">
                                </li>
                                <li title="[吓]" data-code="/:@x">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103226447.png">
                                </li>
                                <li title="[可怜]" data-code="/:8*">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103231181.png">
                                </li>
                                <li title="[菜刀]" data-code="/:pd">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103236908.png">
                                </li>
                                <li title="[西瓜]" data-code="/:<W>">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103241610.png">
                                </li>
                                <li title="[啤酒]" data-code="/:beer">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103246942.png">
                                </li>
                                <li title="[篮球]" data-code="/:basketb">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103251889.png">
                                </li>
                                <li title="[乒乓]" data-code="/:oo">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103256822.png">
                                </li>
                                <li title="[咖啡]" data-code="/:coffee">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103301730.png">
                                </li>
                                <li title="[饭]" data-code="/:eat">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103306315.png">
                                </li>
                                <li title="[猪头]" data-code="/:pig">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103311631.png">
                                </li>
                                <li title="[玫瑰]" data-code="/:rose">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103316218.png">
                                </li>
                                <li title="[凋谢]" data-code="/:fade">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103321727.png">
                                </li>
                                <li title="[嘴唇]" data-code="/:showlove">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103326466.png">
                                </li>
                                <li title="[爱心]" data-code="/:heart">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103331391.png">
                                </li>
                                <li title="[心碎]" data-code="/:break">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103336293.png">
                                </li>
                                <li title="[蛋糕]" data-code="/:cake">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103341727.png">
                                </li>
                                <li title="[闪电]" data-code="/:li">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103346519.png">
                                </li>
                                <li title="[炸弹]" data-code="/:bome">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103351983.png">
                                </li>
                                <li title="[刀]" data-code="/:kn">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103356315.png">
                                </li>
                                <li title="[足球]" data-code="/:footb">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103401393.png">
                                </li>
                                <li title="[瓢虫]" data-code="/:ladybug">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103406284.png">
                                </li>
                                <li title="[便便]" data-code="/:shit">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103411342.png">
                                </li>
                                <li title="[月亮]" data-code="/:moon">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103416889.png">
                                </li>
                                <li title="[太阳]" data-code="/:sun">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103421513.png">
                                </li>
                                <li title="[礼物]" data-code="/:gift">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103426896.png">
                                </li>
                                <li title="[拥抱]" data-code="/:hug">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103431815.png">
                                </li>
                                <li title="[强]" data-code="/:strong">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103436286.png">
                                </li>
                                <li title="[弱]" data-code="/:weak">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103441411.png">
                                </li>
                                <li title="[握手]" data-code="/:share">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103446541.png">
                                </li>
                                <li title="[胜利]" data-code="/:v">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103451461.png">
                                </li>
                                <li title="[抱拳]" data-code="/:@)">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103456248.png">
                                </li>
                                <li title="[勾引]" data-code="/:jj">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103501861.png">
                                </li>
                                <li title="[拳头]" data-code="/:@@">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103506188.png">
                                </li>
                                <li title="[差劲]" data-code="/:bad">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103511436.png">
                                </li>
                                <li title="[爱你]" data-code="/:lvu">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103516890.png">
                                </li>
                                <li title="[NO]" data-code="/:no">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103521415.png">
                                </li>
                                <li title="[OK]" data-code="/:ok">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103526248.png">
                                </li>
                                <li title="[爱情]" data-code="/:love">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103531694.png">
                                </li>
                                <li title="[飞吻]" data-code="/:<L>">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103536789.png">
                                </li>
                                <li title="[跳跳]" data-code="/:jump">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103541535.png">
                                </li>
                                <li title="[发抖]" data-code="/:shake">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103546800.png">
                                </li>
                                <li title="[怄火]" data-code="/:<O>">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103551956.png">
                                </li>
                                <li title="[转圈]" data-code="/:circle">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103556647.png">
                                </li>
                                <li title="[磕头]" data-code="/:kotow">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103601489.png">
                                </li>
                                <li title="[回头]" data-code="/:turn">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103606571.png">
                                </li>
                                <li title="[跳绳]" data-code="/:skip">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103611997.png">
                                </li>
                                <li title="[投降]" data-code="/:oy">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103616555.png">
                                </li>
                                <li title="[激动]" data-code="/:#-0">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103621939.png">
                                </li>
                                <li title="[乱舞]" data-code="/:hiphot">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103626894.png">
                                </li>
                                <li title="[献吻]" data-code="/:kiss">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103636123.png">
                                </li>
                                <li title="[左太极]" data-code="/:<&amp;">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103641405.png">
                                </li>
                                <li title="[右太极]" data-code="/:&amp;>">
                                    <img src="http://www.onegreen.net/QQ/UploadFiles/201404/20140427103646322.png">
                                </li>
                                        
                                        
                                        
                                            
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="floorListCard" class="fadeInUp">
            <div class="content">
                <ul>
                    <!-- <li>皇马郦宫 <span data-id="1">发送</span></li> -->
                    <li>四季松湖 <span data-id="2">发送</span></li>
                    <li>万科城 <span data-id="3">发送</span></li>
                    <li>万科翡丽山 <span data-id="4">发送</span></li>
                    <li>万科首铸·东江之星 <span data-id="5">发送</span></li>
                    <li>万科幸福城 <span data-id="6">发送</span></li>
                    <li>万科云城 <span data-id="7">发送</span></li>
                    <li>万科中天·城市花园 <span data-id="8">发送</span></li>
                    <li>万科中央公园 <span data-id="9">发送</span></li>
                    <li>万科珠江东岸 <span data-id="10">发送</span></li>
                </ul>
                <div class="closeBox">
                    <span class="iconfont icon-guanbi1"></span>
                </div>
            </div>
            
        </div>
        
        <div class="model_box">

            <span class="tip_box">暂无客服消息</span>
            <br>
            <br>
            <br>
            <span class="tip_content_box">新消息将会通过模板消息通知您，点开即可回复。</span>
            <br>
            <br>
        </div>

        <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="pswp__bg"></div>
            <div class="pswp__scroll-wrap">
                <div class="pswp__container">
                    <div class="pswp__item"></div>
                    <div class="pswp__item"></div>
                    <div class="pswp__item"></div>
                </div>
                <div class="pswp__ui pswp__ui--hidden">
                    <div class="pswp__top-bar">
                        <div class="pswp__counter"></div>
                        <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                        <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
                        <div class="pswp__preloader">
                            <div class="pswp__preloader__icn">
                                <div class="pswp__preloader__cut">
                                    <div class="pswp__preloader__donut"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                        <div class="pswp__share-tooltip"></div>
                    </div>
                    <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
                    <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
                    <div class="pswp__caption">
                        <div class="pswp__caption__center"></div>
                    </div>
                </div>
            </div>
        </div>

        <script src='../res/js/jquery.min.js'></script>
        <script src="../res/js/up.js"></script>
        
        <script src="../res/plugins/photoswipe/photoswipe-ui-default.min.js"></script>
		<script src="../res/plugins/photoswipe/photoswipe.min.js"></script>
        <script>

            function Chat() {
                this.socket = null
                this.salesid = '${salesId}'
                this.isvank = '${isVanker}' == "true" ? 0 : 1
                this.host = (location.host.indexOf("192") > -1 || location.host.indexOf("localhost") > -1) ? location.host + "/dvmini" : location.host
                this.url = "ws://" + this.host + "/web/socket/" + '${salesId}' + "/" + ('${isVanker}' == "true" ? 0 : 1)         //  mini.weiyisz.com


                this.pages = {}     //所有的粉丝记录所在的当前的
                this.faceCode = ["/::)", "/::~", "/::B", "/::|", "/:8-)", "/::<", "/::$", "/::X", "/::Z", "/::'(", "/::-|", "/::@", "/::P", "/::D", "/::O", "/::(", "/::+", "/:–b", "/::Q", "/::T", "/:,@P", "/:,@-D", "/::d", "/:,@o", "/::g", "/:|-)", "/::!", "/::L", "/::>", "/::,@", "/:,@f", "/::-S", "/:?", "/:,@x", "/:,@@", "/::8", "/:,@!", "/:!!!", "/:xx", "/:bye", "/:wipe", "/:dig", "/:handclap", "/:&-(", "/:B-)", "/:<@", "/:@>", "/::-O", "/:>-|", "/:P-(", "/::'|", "/:X-)", "/::*", "/:@x", "/:8*", "/:pd", "/:<W>", "/:beer", "/:basketb", "/:oo", "/:coffee", "/:eat", "/:pig", "/:rose", "/:fade", "/:showlove", "/:heart", "/:break", "/:cake", "/:li", "/:bome", "/:kn", "/:footb", "/:ladybug", "/:shit", "/:moon", "/:sun", "/:gift", "/:hug", "/:strong", "/:weak", "/:share", "/:v", "/:@)", "/:jj", "/:@@", "/:bad", "/:lvu", "/:no", "/:ok", "/:love", "/:<L>", "/:jump", "/:shake", "/:<O>", "/:circle", "/:kotow", "/:turn", "/:skip", "/:oy", "/:#-0", "/:oy", "/:kiss", "/:<&", "/:&>"]
                this.faceText = ["微笑", "撇嘴", "色", "发呆", "得意", "流泪", "害羞", "闭嘴", "睡", "大哭", "尴尬", "发怒", "调皮", "呲牙", "惊讶", "难过", "酷", "冷汗", "抓狂", "吐", "偷笑", "愉快", "白银", "傲慢", "饥饿", "困", "恐慌", "流汗", "憨笑", "悠闲", "奋斗", "咒骂", "疑问", "嘘", "晕", "疯了", "哀", "骷髅", "敲打", "再见", "擦汗", "抠鼻", "鼓掌", "糗大了", "坏笑", "左哼哼", "右哼哼", "哈欠", "鄙视", "委屈", "快哭了", "阴险", "亲亲", "吓", "可怜", "菜刀", "西瓜", "啤酒", "篮球", "乒乓", "咖啡", "饭", "猪头", "玫瑰", "凋谢", "嘴唇", "爱心", "心碎", "蛋糕", "闪电", "炸弹", "刀", "足球", "瓢虫", "便便", "月亮", "太阳", "礼物", "拥抱", "强", "弱", "握手", "胜利", "抱拳", "勾引", "拳头", "差劲", "爱你", "NO", "OK", "爱情", "飞吻", "跳跳", "发抖", "怄火", "转圈", "磕头", "回头", "跳绳", "投降", "激动", "乱舞", "献吻", "左太极", "右太极"]
                this.faceText2 = ["/微笑","/撇嘴","/色","/发呆","/得意","/流泪","/害羞","/闭嘴","/睡","/大哭","/尴尬","/发怒","/调皮","/呲牙","/惊讶","/难过","/酷","/冷汗","/抓狂","/吐","/偷笑","/愉快","/白银","/傲慢","/饥饿","/困","/恐慌","/流汗","/憨笑","/悠闲","/奋斗","/咒骂","/疑问","/嘘","/晕","/疯了","/哀","/骷髅","/敲打","/再见","/擦汗","/抠鼻","/鼓掌","/糗大了","/坏笑","/左哼哼","/右哼哼","/哈欠","/鄙视","/委屈","/快哭了","/阴险","/亲亲","/吓","/可怜","/菜刀","/西瓜","/啤酒","/篮球","/乒乓","/咖啡","/饭","/猪头","/玫瑰","/凋谢","/嘴唇","/爱心","/心碎","/蛋糕","/闪电","/炸弹","/刀","/足球","/瓢虫","/便便","/月亮","/太阳","/礼物","/拥抱","/强","/弱","/握手","/胜利","/抱拳","/勾引","/拳头","/差劲","/爱你","/NO","/OK","/爱情","/飞吻","/跳跳","/发抖","/怄火","/转圈","/磕头","/回头","/跳绳","/投降","/激动","/乱舞","/献吻","/左太极","/右太极"]
                this.faceImg = ["http://www.onegreen.net/QQ/UploadFiles/201404/20140427102755304.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102806118.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102811204.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102816272.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102821779.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102826616.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102831909.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102836860.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102841446.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102846605.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102851155.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102856815.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102901326.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102906485.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102911867.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102916775.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102921112.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102926579.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102931107.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102936174.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102941562.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102946241.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102951305.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102956983.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103001341.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103006230.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103011620.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103016770.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103021180.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103026333.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103031826.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103036856.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103041851.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103046204.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103051515.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103056368.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103101584.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103106639.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103111714.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103116995.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103121307.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103126628.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103131537.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103136922.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103141708.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103146409.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103151786.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103156150.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103201493.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103206968.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103211938.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103216563.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103221494.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103226447.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103231181.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103236908.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103241610.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103246942.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103251889.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103256822.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103301730.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103306315.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103311631.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103316218.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103321727.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103326466.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103331391.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103336293.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103341727.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103346519.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103351983.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103356315.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103401393.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103406284.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103411342.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103416889.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103421513.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103426896.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103431815.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103436286.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103441411.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103446541.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103451461.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103456248.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103501861.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103506188.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103511436.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103516890.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103521415.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103526248.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103531694.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103536789.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103541535.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103546800.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103551956.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103556647.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103601489.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103606571.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103611997.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103616555.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103621939.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103626894.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103636123.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103641405.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103646322.png"]
            }
            Chat.prototype = {
                init: function () {                                                                                 //---获取聊天记录
                    var that = this
                    $.post("http://" + this.host + "/sale/chatlogList?salesId=" + this.salesid + "&page=1", function (data) {
                        console.log(data);
                         
                        if (data.code == 0) {

                            data.data.forEach(function(e){
                                var msg = (e.replytype < 5 ? e.reply : e.ask)
                                
                                that.create_newChat_list({
                                    fansid: e.fansid,
                                    logo:e.logo,
                                    nickname:e.nickname,
                                    ask:msg,
                                    asktime:e.asktime
                                })
                                that.isLook({ fansid: e.fansid }, e.num)
                                that.create_newChat_info({fansid:e.fansid})
                            })
                            
                        }
                        if (!data.data || data.data.length<1) {
                            $(".model_box").css("display", "flex")
                        }
                    })

                    
                },

                connect: function () {                                                                              //---socket链接
                    var that = this
                    this.socket = new WebSocket(this.url)
                    this.socket.onopen = function () {
                        console.log("socket run..")
                    }
                    this.socket.onmessage = function (msg) {

                        var data = null
                        try {
                            data = JSON.parse(msg.data)
                            that.process(data)
                        } catch (error) {

                        }
                    }
                    this.socket.onclose = function () {
                        console.log("socket close..")
                    }
                },

                process: function (msg) {                                                                           //---处理socket发来的消息(逻辑控制层)
                    
                    
                    if (!!msg.imgurl2 || !!msg.reply && !!!msg.ask) {            //是否是自己发送的
                        this.create_newChat_(msg,"me")
                        this.updataChatList(msg)
                    } else {
                        var _isNew = this._isNewChat(msg)        //是否新会话
                        if (_isNew) {
                            this.create_newChat_list(msg ,"sort")
                            this.create_newChat_info(msg)
                            this.create_newChat_(msg)
                            this.isLook(msg)
                        } else {
                            this.create_newChat_(msg)
                            this.updataChatList(msg)
                            if (!this._isInThisPage(msg)) {
                                this.isLook(msg)
                            }
                        }
                    }
                    if (false) {
                        this.create_warn(msg)
                    }
                },
                isLook: function (msg, reset) {                                                                     //---处理未读标识( 用到了 localStorage )

                    var localData = localStorage.getItem("look")
                    var obj = {}
                    if (!!localData) {
                        obj = JSON.parse(localStorage.getItem("look"))
                    }

                    var count = obj["_" + msg.fansid] || 0
                    count++
                    if (reset != undefined) {
                        if (reset == "reset") {
                            count = 0
                        } else {

                            count = reset
                        }
                    }

                    obj["_" + msg.fansid] = count
                    for (x in obj) {

                        var a = x.substring(1, x.length)
                        if (a == msg.fansid) {

                            $("[data-index='" + a + "']").find(".dot").text(obj[x])
                        }


                    }
                    var _json = JSON.stringify(obj)
                    localStorage.setItem("look", _json)
                    $("[data-index='" + a + "'] .dot").text()

                    if ($("[data-index='" + msg.fansid + "'] .dot").text() == 0) {
                        $("[data-index='" + msg.fansid + "'] .dot").hide()
                    } else {
                        $("[data-index='" + msg.fansid + "'] .dot").show()
                    }

                },
                create_newChat_list: function (msg,sort) {                                                          //---创建一个列表会话
                    var template = '<li layim-event="chat" data-type="history" onclick="aa()" data-index="' + msg.fansid + '" >' +
                        '<div>' +
                        '<img src=' + (msg.logo || "../res/images/default_user.png") + '>' +
                        '<span class="dot"></span>' +
                        '</div>' +
                        '<span class="name">' + (msg.nickname || "客户 : " + msg.fansid) + '</span>' +
                        '<span class="time" style="float:right;color:#999;font-size:14px;">' + this._toTimeText_G(msg.asktime) + '</span>' +
                        '<p class="contInfo">' + this.toFaceImg(msg.ask)  + '</p>' +
                        '<span class="layim-msg-status">new</span>' +
                        '</li>'
                    if(sort =="sort"){
                        $("#chatListBox").prepend(template)
                    }else{
                        $("#chatListBox").append(template)
                    }
                    $(".model_box").hide()
                },
                create_newChat_info: function (msg) {                                                               //---创建一个对话会话                
                    var template = '<div class="layim-chat-main layui-hide" data-fansid="' + msg.fansid + '" style="overflow-y:initial;bottom:50px;top:0">' +
                        '<div style="width:100%;height:100%;overflow-y:scroll">'+
                        '<ul> ' +
                        '</ul>' +
                        '</div>'+
                        '</div>'
                    $("#chatInfoBox").append(template)
                },
                create_warn: function (msg) {                                                                       //---创建一个警告提示消息
                    var template = '<li class="layim-chat-system">' +
                        '<span>' + msg.message + '</span>' +
                        '</li>'
                    
                    var _height = $("[data-fansid='" + msg.fansid + "']").find("ul").height()
                    if(msg.sort){
                        $("[data-fansid='" + msg.fansid + "']").find("ul").prepend(template)
                    }else{
                        $("[data-fansid='" + msg.fansid + "']").find("ul").append(template)
                        $("[data-fansid='" + msg.fansid + "']").find("div").scrollTop(_height)

                    }
                },
                create_getMore:function(msg){                                                                       //---创建一个拉取更多的按钮
                    var that = this
                    console.log(msg)
                    var template = '<li class="layim-chat-system postMore"  data-page="'+msg.page+'">' +
                        '<span>' + msg.message + '</span>' +
                        '</li>'
                    $("[data-fansid='" + msg.fansid + "']").find("ul").prepend(template)
                    
                },
                postMore:function(fansid,page){                                                                     //---拉取聊天数据
                    var that = this
                    $.post("http://" + this.host + "/sale/chatlogList?salesId=" + this.salesid + "&page=" + page + "&fansId=" + fansid, function (data) {
                        console.log(data)
                        var page_ = page+1
                        if(data.data.data){
                            var page_item = Math.ceil(data.data.count / 20)          //当前粉丝的聊天记录的总页数
                            
                            data.data.data.forEach(function (e, i) {
                                that.create_newChat_(e,"sort")
                                
                            });
                            if(page_item >= page_){
                                
                                that.create_getMore({fansid:fansid,message:"查看更多",page:page_})
                            }else{
                                console.log(page_)

                                that.create_warn({fansid:fansid,message:"没有更多记录",sort:"sort"})
                            }
                        }
                    })
                },

                create_Img:function(msg){                                                                           //---创建一个图片标签并返回
                    var randomVal = Math.random().toString(36).substr(2);
                    var str = '<image src="'+ msg +'?'+ randomVal +'" class="userimg" alt="">'
                    return str
                },
                create_newChat_: function (msg,option) {                                                            //---插入一条消息
                    if(option == "me"){    // 服务器返回的销售的消息体(不用创建会话 , 而是改变状态)
                        this.clearState(msg)
                        
                        return false   
                    }
                    var template = this.msgTemplate(msg)           
                    if(option == "sort"){
                        $("[data-fansid='" + msg.fansid + "']").find("ul").prepend(template)
                    }else{
                        $("[data-fansid='" + msg.fansid + "']").find("ul").append(template)
                    }
                    showimg.bind()
                    var b_isMe = !(msg.replytype == 9 || msg.replytype == 11)       //是否是销售本人(Boolean )
                    if(!msg.replytype){
                        b_isMe = (!!msg.reply && !!!msg.ask)
                    }
                    if (b_isMe) {
                        
                        if (!$("#send").is(".layui-disabled")) {
                            $("#send").addClass("layui-disabled")
                        }
                    }
                    if(option != 'sort'){
                        var _height = $("[data-fansid='" + msg.fansid + "']").find("ul").height()
                        $("[data-fansid='" + msg.fansid + "']").find("div").scrollTop(_height)
                    }
                    

                },
                clearState:function(msg){                                                                           //---改变当条消息的状态
                    $("[data-msgid="+ msg.id +"]").html(this._toTime_G(msg.asktime))
                    if(msg.replytype == -1){
                        this.create_warn({
                            fansid:msg.fansid,
                            message: msg.reply || '消息处理异常,请刷新重试'
                        })      
                        $("[data-msgid="+ msg.id +"]").html('<i class="iconfont icon-weibiaoti-"></i>')
                        return false 
                    } 
                    if(msg.replytype == 45015){
                        this.create_warn({
                            fansid:msg.fansid,
                            message: "发送失败: 回应已超过48小时"
                        })      
                        $("[data-msgid="+ msg.id +"]").html('<i class="iconfont icon-weibiaoti-"></i>')
                        return false 
                    } 
                    if(msg.replytype == 45047){
                        this.create_warn({
                            fansid:msg.fansid,
                            message:"发送失败: 连续下发超过5条"    
                        })
                        $("[data-msgid="+ msg.id +"]").html('<i class="iconfont icon-weibiaoti-"></i>')      
                        return false 
                    }
                    if(msg.replytype == 40001 || msg.replytype == 40002 || msg.replytype == 40003 || msg.replytype == 48001 ){
                        this.create_warn({
                            fansid:msg.fansid,
                            message:"参数错误,请截图联系管理员--> " + msg.replytype
                        })     
                        $("[data-msgid="+ msg.id +"]").html('<i class="iconfont icon-weibiaoti-"></i>')
                        return false 
                    }
                },
                sendTimeOut:function(msg){                                                                          //---定时器判断是否发送超时 ( 10s ) 超时改变状态
                    setTimeout(function(){
                        if($("[data-msgid="+ msg.id +"]").find(".icon-loading").length >0){
                            $("[data-msgid="+ msg.id +"]").html('<i class="iconfont icon-weibiaoti-"></i>')
                        }
                        
                    },10000)
                },
                msgTemplate:function(msg){                                                                          //---创建一条消息模版

                   

                    var b_isMe = !(msg.replytype == 9 || msg.replytype == 11)       //是否是销售本人(Boolean )    f废弃 (至判断是否有消息内容)
                    
                        b_isMe = (!!msg.reply && !!!msg.ask)
                    

                    var isMeClass = b_isMe ? "layim-chat-mine" : ""                 //是否是销售本人(ClassName)
                    var msg__ = b_isMe ? msg.reply : msg.ask                        //对应的选择消息
                    var logo = (function(){
                        var _logo = ""
                        if(msg.replytype == 1 || msg.replytype == 2 || msg.replytype == 3){
                            _logo = "../res/images/robot_logo.png"
                        }else{
                            _logo = (b_isMe ? '../res/images/vanke_logo.png' : (msg.logo || "../res/images/default_user.png"))
                        }
                        return _logo
                    })()
                    
                    var name = (function(){
                        var _name = ""
                        if(msg.replytype == 1 || msg.replytype == 2 || msg.replytype == 3 ){
                            _name = "机器人"
                        }else{
                            _name = (b_isMe ? (msg.salename || "vanke" ): (msg.nickname || "客户 : " + msg.fansid))
                        }
                        return _name
                    })()
                    if(msg.replytype == 9){
                        b_isMe = false
                        msg__ = this.create_Img(msg)
                    }else{
                        msg__ = this.toFaceImg(msg__)
                    }
                    var template = ""
                    if(!!msg.ask || !!msg.imgurl){
                        template += '<li class="layim-chat-li ">' +
                                '<div class="layim-chat-user">' +
                                '<img src="' + (msg.logo || "../res/images/default_user.png") + '">' +
                                '<cite class="layim-user-box"><span class="username_box">' + (msg.nickname || "客户 : " + msg.fansid) + '</span><span class="time_box">' + this._toTime_G(msg.asktime) + '</span></cite>' +
                                '</div>' +
                                '<div class="layim-chat-text">' + (!!msg.imgurl ? this.create_Img(msg.imgurl) : this.toFaceImg(msg.ask))  + '</div>' +
                                '</li>'
                        
                    }
                    if(!!msg.reply || !!msg.imgurl2){
                        template += '<li class="layim-chat-li layim-chat-mine">' +
                                '<div class="layim-chat-user">' +
                                '<img src="'+ (msg.replytype < 4 ? "../res/images/robot_logo.png" : "../res/images/vanke_logo.png") +'">' +
                                '<cite class="layim-user-box"><span class="time_box" '+ (msg.id ? 'data-msgid='+ msg.id  : "") +'>' + (!!msg.asktime ? this._toTime_G(msg.asktime) : '<span class="rotateZAnimated"><i class="iconfont icon-loading"></i></span>') + '</span><span class="username_box">'+ (msg.replytype < 4 ? "机器人" : (msg.salename || "vanke" )) +'</span></span></cite>' +
                                '</div>' +
                                '<div class="layim-chat-text">' + (!!msg.imgurl2 ? this.create_Img("http://" + msg.imgurl2) : this.toFaceImg(msg.reply))  + '</div>' +
                                '</li>'
                    }
                    
                    
                    
                    
                    return template
                },
                updataChatList: function (msg) {                                                                    //---更新聊天列表( 时间 , 消息体)
                    var msg_ = (!!msg.reply && !!!msg.ask) ? msg.reply : msg.ask
                    $("[data-index='" + msg.fansid + "']").find(".contInfo").html(this.toFaceImg(msg_))
                    $("[data-index='" + msg.fansid + "']").find(".time").text(this._toTimeText_G(msg.asktime))
                    $("#chatListBox").prepend($("[data-index='" + msg.fansid + "']").detach());
                },
                _isNewChat: function (msg) {                                                                        //---是否是新的会话
                    var _isNew = true
                    $("[data-fansid]").each(function () {
                        if ($(this).data("fansid") == msg.fansid) {
                            _isNew = false
                        }
                    })
                    return _isNew
                },
                _isInThisPage: function (msg) {                                                                     //---是否在当前聊天页
                    var _isThis = !$("[data-fansid='" + msg.fansid + "']").is(".layui-hide")
                    return _isThis
                },
                
                _toTimeText_G: function (str) {                                                                     //---时间转换函数
                    if (typeof (str) != "string" && typeof (str) != "number") {
                        console.log(str + ":No is a String")
                        return str
                    }
                    try {
                        if (new Date(str) == "Invalid Date") {
                            str = str.replace(/-/g, "/")
                        }
                        var timeStamp = new Date(str).getTime()

                    } catch (error) {
                        console.log("请传入正确的事件格式")
                        return str
                    }
                    var new_timeStamp = new Date().getTime()
                    var diff = new_timeStamp - timeStamp

                    diff = diff / 1000
                    if (diff < 0) {
                        console.log("超出当前日期")
                        // return str
                        return "刚刚"
                    }
                    if (diff < 3600) {
                        if (diff < 60) {
                            return "刚刚"
                        } else {
                            return Math.floor(diff / 60) + "分钟前"
                        }
                    } else if (diff < 86400) {

                        return Math.floor(diff / 3600) + "小时前"
                    } else if (diff < 864000) {
                        return Math.floor(diff / 86400) + "天前"
                    } else {
                        var __time = this._toTime_G(str)
                        return __time
                    }
                },  
                _toTime_G: function (v) {                                                                           //--- 转时间
                    var time = new Date(v)
                    var year = time.getFullYear()
                    var mon = time.getMonth() + 1;
                    var day = time.getDate();
                    var hour = time.getHours();
                    var min = time.getMinutes();
                    if (mon < 10) mon = "0" + mon
                    if (day < 10) day = "0" + day
                    if (hour < 10) hour = "0" + hour
                    if (min < 10) min = "0" + min
                    return mon + "-" + day + " " + hour + ":" + min
                },
                toFaceCode: function (msg) {                                                                        //---表情文字转代码
                    var _msg = msg
                    var reg = /\[.*?\]/g;
                    var some = reg.exec(_msg);                //匹配到的字段

                    while (some) {
                        var _some = some[0].replace(/\[/, "")
                        _some = _some.replace(/\]/, "")
                        var index = this.faceText.indexOf(_some)
                        msg = msg.replace(new RegExp(_some, 'g'), this.faceCode[index])
                        some = reg.exec(_msg);
                    }
                    msg = msg.replace(/\[/g, "")
                    msg = msg.replace(/\]/g, "")
                    return msg
                },
                toFaceImg: function (msg) {                                                                         //---表情文字转图片
                    var _msg = msg
                    var reg = /\[.*?\]/g;
                    var some = reg.exec(_msg);                //匹配到的字段
                    var isReset = false

                    while (some) {
                        var _some = some[0].replace(/\[/, "")
                        _some = _some.replace(/\]/, "")
                        var index = this.faceText.indexOf(_some)
                        if(index >-1){
                            msg = msg.replace(new RegExp(_some, 'g'), '<image src="'+ this.faceImg[index] +'" alt="">') 

                        }else{
                            isReset = "[" + _some + "]"
                        }
                        some = reg.exec(_msg);
                    }
                    var that = this
                    this.faceText2.forEach(function(e,i){
                        var reg2 = new RegExp(e,"g")
                        if(reg2.test(msg)){
                            msg = msg.replace(reg2,'<image src="'+ that.faceImg[i] +'" alt="">'   )

                        }
                    })
                    
                    msg = msg.replace(/\[/g, "")
                    msg = msg.replace(/\]/g, "")
                    msg = msg.replace(/</g,"&lt;")
                    msg = msg.replace(/&lt;image/g,"<img")
                    if(isReset){
                        return isReset
                    }else{
                        return msg
                    }
                    
                },
                resetCountMsg:function(id){                                                                         //---重置未读条数
                    $.post("../sale/cleanCatlogList?salesId=" + this.salesid + "&fansId=" + id, function (data) {
                        console.log(data)
                    })
                },
                bind: function () {                                                                                 //---用户操作相关
                    var that = this

                    //点击消息列表
                    $(document).on("click", "[layim-event='chat']", function () {
                        

                        
                        var id = $(this).data("index")
                        var name = $(this).find(".name").text()
                        that.resetCountMsg(id)
                        that.isLook({ fansid: id }, "reset")

                        $("#chatBox").removeClass("layui-hide")               //显示对话
                        
                        $("#chatName").text(name)
                        $("#content").data("id", id)
                        var _height = $("[data-fansid='" + id + "']").find("ul").height()
                        $("[data-fansid='" + id + "']").find("div").scrollTop(_height)
                        if($("#chatBox").find("[data-fansid='" + id + "']").find("li").length < 1){
                            $.post("http://" + that.host + "/sale/chatlogList?salesId=" + that.salesid + "&page=1" + "&fansId=" + id, function (data) {
                                console.log(data)
                                if(data.code == 0){
                                    
                                    $("#send").data("salename",data.data.data[0].salename)
                                    var page_item = Math.ceil(data.data.count / 20)          //当前粉丝的聊天记录的总页数
                                    if(page_item > 1){
                                        that.create_getMore({fansid:id,message:"查看更多",page:2})
                                    }else{
                                        that.create_warn({fansid:id,message:"没有更多记录"})
                                    }

                                    data.data.data.reverse().forEach(function (e, i) {
                                        that.create_newChat_(e)
                                        if (i == data.data.data.length - 1) {
                                            that.updataChatList(e)
                                        }
                                    });
                                    
                                }
                            })
                        }
                        $("#chatBox").find("[data-fansid='" + id + "']").removeClass("layui-hide")
                        $.post("http://" + that.host + "/sale/checkChatStatus?salesId="+ that.salesid +"&fansId=" + id ,function(data){
                            if(data){
                                $(".noRobot").show()
                                $(".isRobot").hide()
                            }else{
                                $(".noRobot").hide()
                                $(".isRobot").show()
                            }
                        })
                    })
                    //点击返回按钮
                    $("#backChat").click(function () {
                        $("#chatBox").addClass("layui-hide")
                        $("#chatBox").find("[data-fansid]").removeClass("layui-hide").addClass("layui-hide")
                        $("#content").val("")
                        var id = $("#content").data("id")
                        that.resetCountMsg(id)
                    })

                    //点击发送按钮
                    $("#send").click(function () {
                        if ($(this).is(".layui-disabled")) {
                            return false
                        }
                        
                        var msg = $("#content").val()
                        $("#faceBox").slideUp(100)
                        var msgLocal = msg
                        msg = that.toFaceCode(msg)
                        var id = $("#content").data("id")
                        var _ask = '${isVanker}' == "true" ? 2 : 1
                        var _salename = $(this).data("salename") || "vanke"
                        var timeId = ""+new Date().getTime()
                        timeId = timeId.substring(4,timeId.length)
                        timeId = parseFloat(timeId)
                        var _obj = {
                            "fansid": id,
                            "ask": "",
                            "reply": msgLocal,
                            "salesid": that.salesid,//销售id
                            "salename": _salename,
                            "id": timeId,
                            "askfrom": _ask,
                            "readed": true,
                            "replytype":4
                        }
                        that.create_newChat_(_obj)
                        that.sendTimeOut(_obj)
                        _obj.reply = msg
                        _obj = JSON.stringify(_obj)
                        that.socket.send(_obj)
                        $("#content").val("")
                    })

                    //监听按键事件
                    $("#content").keyup(function (e) {
                        var msg = $(this).val()
                        msg = msg.replace(/ /g, "")
                        if (msg.length < 1) {
                            if (!$("#send").is(".layui-disabled")) {
                                $("#send").addClass("layui-disabled")
                            }
                        } else {
                            $("#send").removeClass("layui-disabled")
                        }
                        if (e.which == 13) {
                            $("#send").click()
                        }
                    })

                    //点击输入框事件
                    $("#content").click(function(){
                        var that = this
                        setTimeout(function () {
                            that.scrollIntoView(true);
                            var id = $(that).data("id")
                            var _height = $("[data-fansid='" + id + "']").find("ul").height()
                            $("[data-fansid='" + id + "']").find("div").scrollTop(_height)
                            document.body.scrollTop = document.body.scrollHeight;
                        }, 300);
                        $("#faceBox").slideUp(100)
                    })
                    //点击呼出表情事件
                    $(".icon-xiaolian").click(function (e) {
                        e.stopPropagation()
                        $("#faceBox").slideDown(100)
                    })
                    //点击表情model隐藏
                    $("#faceBox").click(function () {
                        $("#faceBox").slideUp(100)
                    })
                    //点击单个表情
                    $("ul.layui-layim-face li").click(function (e) {
                        e.stopPropagation()
                        var oldVal = $("#content").val()
                        oldVal += $(this).attr("title")
                        $("#content").val(oldVal)
                        console.log($(this))

                        if (oldVal.length < 1) {
                            if (!$("#send").is(".layui-disabled")) {
                                $("#send").addClass("layui-disabled")
                            }
                        } else {
                            $("#send").removeClass("layui-disabled")
                        }
                    })

                    //人工接入
                    $("#killRobot").click(function(){
                        var id = $("#content").data("id")
                        $.post("http://" + that.host + "/sale/checkoutStatus?salesId="+ that.salesid +"&fansId=" + id ,function(data){
                            if(data){
                                that.create_warn({fansid:id,message:"接入成功"})
                                $("#killRobot").hide()
                                $(".noRobot").show()
                                
                            }
                        })
                        
                    })

                    //查看更多聊天记录
                    $(document).on("click",".postMore",function(){
                        var page = $(this).data("page")
                        var fansid = $(this).parents("[data-fansid]").data("fansid")
                        that.postMore(fansid,page)
                        $(this).remove()
                        console.log(page + "----" + fansid)
                    })

                    //展开功能盒子
                    $(".icon-guanbi").click(function(){
                        var isOpen = $(this).is('.on')
                        console.log(isOpen)
                        if(isOpen){
                            $(this).removeClass('on')
                            $(this).parent().find(".posStyle").css("display","none")
                        }else{
                            $(this).addClass('on')
                            $(this).parent().find(".posStyle").css("display","block")
                        }
                    })
                    //关闭功能盒子
                    $(".posStyle").click(function(){
                        $(".posStyle").css("display","none")
                        $(".icon-guanbi").removeClass("on")
                    })

                    //发送小程序卡片的盒子视图控制 - 显示
                    $(".icon-fasonghongbaocopy").click(function(){
                        $("#floorListCard").css("display","flex")
                    })
                    //发送小程序卡片的盒子视图控制 - 隐藏
                    $("#floorListCard .closeBox .icon-guanbi1").click(function(){
                        $("#floorListCard").hide()
                    })
                    //发送小程序卡片事件
                    $("#floorListCard li span").click(function(){
                        var fansid = $("#content").data("id")
                        var floorid = $(this).data("id")
                        var floorName = $(this).parent().text().replace(/发送/,"")
                        $("#floorListCard").hide()
                        $.get("http://" + that.host + "/sale/sendProudct",{"productId":floorid,"fansId":fansid },function(data){
                            console.log(data)
                            if(data.code == 0){
                                that.create_warn({
                                    fansid:fansid,
                                    message:"已发送卡片:" + floorName
                                })
                            }else if(data.code == 45015){
                                that.create_warn({
                                    fansid:fansid,
                                    message:"发送卡片失败: 回应已超过48小时"
                                })
                            }else if(data.code == 45047){
                                that.create_warn({
                                    fansid:fansid,
                                    message:"发送卡片失败: 连续下发超过5条"
                                })
                            }else{
                                that.create_warn({
                                    fansid:fansid,
                                    message:"发送卡片失败: " + data.code
                                })
                            }
                            
                        })
                    })

                    //上传照片
                    $.up({
                        el:".icon-xiangji",
                        url:"../upload/UploadImg",
                        success:function(data){   
                            var id = $("#content").data("id")
                            var _ask = '${isVanker}' == "true" ? 2 : 1
                            var _salename = $("#send").data("salename") || "vanke"
                            var timeId = ""+new Date().getTime()
                            timeId = timeId.substring(4,timeId.length)
                            timeId = parseFloat(timeId)
                            var _obj = {
                                "fansid": id,
                                "ask": "",
                                "reply": "",
                                "id": timeId,
                                "imgurl2": location.host + data.data ,
                                "salesid": that.salesid,//销售id
                                "salename": _salename,
                                "askfrom": _ask,
                                "readed": true,
                                "replytype":10
                            }
                            that.create_newChat_(_obj)
                            _obj = JSON.stringify(_obj)
                            that.socket.send(_obj)
                        }
                    })
                }
            }

            function Showimg(el) {
                this.el = el
            }
			
			Showimg.prototype = {
				getitems: function(el) { //获取items数组对象
					var list = document.querySelectorAll(el)
					var items = []
					for(i = 0; i < list.length; i++) {
						var obj = {}
						obj.src = list[i].src
						obj.h = list[i].naturalHeight
						obj.w = list[i].naturalWidth
						items.push(obj)
					}
					return items
				},
				ceratePhoto: function(i) { //初始化新的相册框
					var pswpElement = document.querySelectorAll('.pswp')[0];
					var items = this.getitems(this.el);
					var options = {
						history: false,
						focus: false,
						index: i,
						showAnimationDuration: 0,
						hideAnimationDuration: 0
					};
					gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
					gallery.init()
				},
				bind: function() { //绑定click事件
					var that = this
					$(document).off("click", this.el)
					$(document).on("click", this.el, function() {
						var index = $(this).index(that.el)
						that.ceratePhoto(index)
					})
					$(this.el).click(function() {})
				}
			}
			
			var showimg = new Showimg(".userimg")
			showimg.bind()

            var chat = new Chat()
            chat.init()
            chat.bind()
            chat.connect()
            function aa(){ }




        </script>
    </body>

    </html>